<script setup lang="ts">
/**
 * @name ElectricPriceConfigs
 * @description 电价配置
 */
import { Delete, Edit } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import ElectricityCell from './components/ElectricityCell.vue'
import ElectricityDialog from './components/ElectricityDialog.vue'
import type { ElectricityConfig, OmitCreationElectricityConfig } from '@/mixins/MixinElectricPriceConfigs'
import { getDefaults, useElectricPriceConfigs } from '@/mixins/MixinElectricPriceConfigs'

const time = ref('')
const {
  lists,
  columns,
  loading,
  pagination,
  queryElectricPriceConfigsByPage,
  delElectricityConfig,
} = useElectricPriceConfigs()
const dialogRef = ref<InstanceType<typeof ElectricityDialog>>()
const [modal, setModal] = useState<OmitCreationElectricityConfig>(getDefaults())
const [modalTitle, setModalTitle] = useState('')

async function clickSearch() {
  pagination.pageNumber = 1
  await nextTick()
  getData()
}
async function clickAdd() {
  setModalTitle('新增配置')
  setModal({
    ...getDefaults(),
    time: unref(time),
  })
  await nextTick()
  dialogRef.value?.open()
}
async function clickEdit(row: ElectricityConfig) {
  setModalTitle('修改配置')
  const { creationName, creationTime, ...rest } = row

  const defaults = getDefaults()
  const copy = cloneDeep(rest)
  copy.tipList = copy.tipList.length > 0 ? rest.tipList : defaults.tipList
  copy.peakList = copy.peakList.length > 0 ? rest.peakList : defaults.peakList
  copy.flatList = copy.flatList.length > 0 ? rest.flatList : defaults.flatList
  copy.valleyList = copy.valleyList.length > 0 ? rest.valleyList : defaults.valleyList

  setModal(copy)
  await nextTick()
  dialogRef.value?.open()
}
function clickDelete(row: ElectricityConfig) {
  if (row.time) {
    delElectricityConfig(row.time)
  }
}
function getData() {
  queryElectricPriceConfigsByPage({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    time: unref(time),
  })
}

onMounted(() => {
  clickSearch()
})
</script>

<template>
  <div class="padding-sm flex flex-col align-end container">
    <div class="width-fill flex-shrink-0">
      <ElForm inline>
        <ElFormItem label="时间">
          <ElDatePicker
            v-model="time" type="date" placeholder="请选择开始时间" clearable
            format="YYYY-MM-DD" value-format="YYYY-MM-DD"
          />
        </ElFormItem>
        <ElFormItem>
          <SearchButton @click="clickSearch" />
          <AddButton @click="clickAdd" />
        </ElFormItem>
      </ElForm>
    </div>
    <div class="width-fill alpha-block flex-1 overflow-auto p-[10px]">
      <ElTable
        v-loading="loading" :data="lists"
        height="100%" element-loading-custom-class="global-loading"
      >
        <template #empty>
          <TableEmpty />
        </template>
        <ElTableColumn
          v-for="(column, index) in columns"
          :key="index" v-bind="column"
        >
          <template v-if="column.prop.includes('List')" #default="{ row }">
            <ElectricityCell v-if="row[column.prop] && row[column.prop].length > 0" :data="row[column.prop]" />
            <span v-else>-</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <TdButton
              title="修改"
              :icon="Edit"
              type="primary"
              @click="clickEdit(row)"
            />
            <TdButton
              title="删除"
              :icon="Delete"
              type="danger"
              @click="clickDelete(row)"
            />
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
    <ListsPagination
      v-model:page-num="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="getData"
      @size-change="getData"
    />
    <!-- 电价配置对话框 -->
    <ElectricityDialog
      ref="dialogRef"
      v-model="modal" :modal-title="modalTitle"
      :is-add="modalTitle === '新增配置'"
      @save-success="clickSearch"
    />
  </div>
</template>
